<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/utilCss.css">
    <script type="text/javascript" src="../script/jquery.js"></script>

	<style>
  html,body{height: 100%;margin:0px;padding: 0px;}
   body {
     display:flex;
     flex-flow:row wrap;

   }
   .lxb_div_context{
    flex-grow:1;
    border: 1px #cbcaca solid;
    margin: 15px 15px 35px 15px;
    border-radius: 10px;
    box-shadow: 0 0 1px 1px rgba(190, 190, 195, 0.25);
   }
   .lxb_div_context_nickname{
     margin-left: 15px;
     margin-top: 15px;
     font-size: 15px;
     color: #101010;
   }

   .lxb_div_context_money{
     text-align: center;
     font-size: 25px;
     color: #101010;
     margin-top: 23px;
   }
   .lxb_div_context_mode{
     margin-top: 23px;
   }

   .lxb_div_context_mode_left{
     font-size: 14px;
     color: #919191;
     display: inline-block;
   }
   .lxb_div_context_mode_rigth{
     color: #101010;
     font-size: 15px;
     float: right;
     width: 65%;
     text-align: right;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
   .lxb_div_context_time_rigth{
     color: #919191;
     font-size: 15px;
     float: right;
   }

	</style>
</head>

<body>
   <div class="lxb_div_context">
    <div class="lxb_div_context_nickname">
      消费时长
    </div>
    <div class="lxb_div_context_money" id="context_time">

    </div>

    <div class="lxb_div_context_mode lxb_div_style1 lxb_div_styleborder1">
      <div class="lxb_div_context_mode_left">
        剩余时间
      </div>
      <div class="lxb_div_context_mode_rigth" id="lxb_div_context_surplusTime_click">

      </div>
    </div>

    <div class="lxb_div_context_state lxb_div_style1 lxb_div_styleborder2">
      <div class="lxb_div_context_mode_left">
        使用时间
      </div>
      <div class="lxb_div_context_time_rigth" id="lxb_div_context_useTime_click">

      </div>
    </div>
   </div>
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">

    apiready = function(){
        var data = api.pageParam;
        data = data.name;
        var time = parseInt(data.content.portContent.spendTime/60)+'h';
        var giveTime = parseInt(data.content.portContent.giveTime/60)+'h';
        var offline = data.content.portContent.offline;
        var online = data.content.portContent.online;
        var useTime = setUseTime(offline,online);
        setViewContext(time,giveTime,useTime);
  }

  /**设置view内容
  *tiem 消费时长
  *surplusTime 剩余时长
  *useTime   使用时间
  */
  function setViewContext(tiem,surplusTime,useTime){
     $('#context_time').text(tiem);
     $('#lxb_div_context_surplusTime_click').text(surplusTime);
     $('#lxb_div_context_useTime_click').text(useTime);
  }

   //得到使用时间
  function setUseTime(offline,online){
    var offString = offline.substr(8,2);
    var onlineString = online.substr(8,2);
    if(offString === onlineString){
         var useTimr = offline.substr(0,offline.length-3)+'-'+online.substr(11,2);
         return useTimr;
    }else {
      var useTimr = offline.substr(0,offline.length-3)+' - '+online.substr(0,offline.length-3);
      return useTimr;
    }
  }

</script>
</html>
